import { useState, useRef } from 'react'
import { Search, Toast } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.css'
import History from './history'
import Result from './result'
import Suggestion from './suggestion'
import { getSuggestion, getResult } from '../../api/search'
import { getHistory, setHistorys } from '../../utils'

let abc = 123

export default () => {
        const searchRef = useRef()
        const [value, setValue] = useState('');
        const [history, setHistory] = useState(getHistory() ? getHistory() : []);
        const [suggestion, setSuggestion] = useState([]);
        const [result, setResult] = useState();
        const navigate = useNavigate()
        const onChange = async (v) => {
                await setValue(() => v)
                clearTimeout(abc)
                if (!v) return setSuggestion([])
                abc = setTimeout(async () => {
                        try {
                                const q = v
                                const { data } = await getSuggestion(q)
                                setSuggestion(data.data.options)
                        } catch (error) {
                                Toast.fail('获取建议失败')
                        }
                }, 500)
        }
        const searchClick = async (item) => {
                await onChange(item)
                await onSearch(item)
        }
        const clearAll = () => {
                setHistory([])
                setHistorys([])
        }
        const clearClick = (index, e) => {
                e.stopPropagation()
                const list = [...history]
                list.splice(index, 1)
                setHistory(list)
                setHistorys(list)
        }
        const onSearch = async (item) => {
                console.log(item);
                setResult(true)
                const array = new Set([item, ...history])
                const array1 = new Array(...array)
                setHistory(array1)
                setHistorys(array1)
        }
        const onCancel = () => {
                navigate('/home')
        }
        const onFocus = async () => {
                await setResult(false)
                await setSuggestion([])
                await onChange(value)
        }
        const onBlur = () => {
        }
        const render = () => {
                if (result) {
                        return <Result value={value} />
                } else {
                        if (!value) {
                                return (<History clearClick={clearClick} clearAll={clearAll} list={history} searchClick={searchClick} />)
                        }
                        return (<Suggestion data={suggestion} value={value} searchClick={searchClick}></Suggestion>)
                }
        }
        return <div className={styles.boxing}>
                <Search
                        onClear={() => setValue('')}
                        ref={searchRef}
                        showAction
                        value={value}
                        onChange={onChange}
                        onSearch={onSearch}
                        onCancel={onCancel}
                        onBlur={onBlur}
                        onFocus={onFocus}
                        placeholder="请输入搜索关键词"
                />
                {render()}
        </div>
}